<script setup>
import { ref, onMounted } from "vue";
const isShowAnimation = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShowAnimation.value = true;
  }, 100);
});
</script>

<template>
  <div class="scientist">
    <!-- 科学著作 -->
    <!-- 左 -->
    <div class="left">
      <Transition
        enter-active-class="animate__animated animate__fadeInDownBig"
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <div class="leftTop" v-if="isShowAnimation">
          <div class="title">千年智慧的结晶</div>
          <div class="text">
            《九章算术》构建了完整的数学体系，提出负数概念和方程解法；《天工开物》被誉为
            "工艺百科全书"，图文并茂记载农业、手工业的巅峰技艺；《农政全书》系统总结农耕智慧，收录抗灾技术与水利工程。
          </div>
        </div>
      </Transition>
      <div class="leftBottom">
        <Transition
          enter-active-class="animate__animated animate__fadeInUpBig"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <RisingSunPicture v-if="isShowAnimation"></RisingSunPicture>
        </Transition>
      </div>
    </div>
    <!-- 中 -->
    <div class="center">
      <div class="centerTop">
        <Transition
          enter-active-class="animate__animated animate__fadeInDownBig"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <BackgroundStyle>
            <BookPictographicColumnDiagram></BookPictographicColumnDiagram>
          </BackgroundStyle>
        </Transition>
      </div>
      <div class="centerBottom">
        <Transition
          enter-active-class="animate__animated animate__fadeInUpBig"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <BackgroundStyle>
            <BookBarChart></BookBarChart>
          </BackgroundStyle>
        </Transition>
      </div>
    </div>
    <!-- 右 -->
    <div class="right">
      <div class="rightTop">
        <Transition
          enter-active-class="animate__animated animate__fadeInDownBig"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <BackgroundStyle>
            <BookHorizontalBarChart></BookHorizontalBarChart>
          </BackgroundStyle>
        </Transition>
      </div>
      <div class="rightBottom">
        <Transition
          enter-active-class="animate__animated animate__fadeInUpBig"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <BackgroundStyle>
            <BookPieChart></BookPieChart>
          </BackgroundStyle>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scientist {
  --animate-duration: 0.5s; /* 控制动画速度 */
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 60px);
  padding: 10px;
  .left {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 100px;
    // background: #d08a8a;
    .leftTop {
      flex: 1;
      margin: 0 10px 0 0;
      padding-bottom: 0;
      // background: #1540ad;
      .title {
        font-size: 30px;
        margin-bottom: 5px;
        font-family: yasong;
        margin-bottom: 10px;
        max-width: 100%;
      }
      .text {
        font-family: yasong;
        line-height: 30px;
        font-size: 18px;
        max-width: 100%;
      }
    }
    .leftBottom {
      flex: 8;
      margin-right: 10px;
      margin-top: -10px;
      max-width: 100%;
      // background: #1191ae;
    }
  }
  .center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // background: #d08a8a;
    .centerTop {
      flex: 1;
      margin: 0 10px 10px 0;
      // background: #1540ad;
    }
    .centerBottom {
      flex: 1;
      margin-right: 10px;
      // background: #1191ae;
    }
  }
  .right {
    flex: 1;
    // background: #159a17;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // background: #d08a8a;
    .rightTop {
      flex: 1;
      margin: 0 10px 10px 0;
      // background: #1540ad;
    }
    .rightBottom {
      flex: 1;
      margin-right: 10px;
      // background: #1191ae;
    }
  }
}
</style>
